<template>
  <div>    
          <div class="hotTitle">
           <img src="../../../public/img/hot.png" alt="">
        </div>
        <ul class="list">
            <li v-for="(v,i) in arr" :key="i">
                <img :src="v.imgfirst" alt="" @click="fun()">
                <h3 class="title">{{v.title}}</h3>
                <p class="title1">{{v.title1}}</p>
                <p class="price">￥<span class="now">{{v.nowprice}}</span> <span class="ori">￥{{v.oriprice}}</span></p>
            </li>
        </ul>
  </div>
</template>

<script>
import {getlink} from "a/getapi.js"
export default {
   data(){
     return{ arr:[]}
    },
 mounted(){ 
        getlink("/demo/hot").then((ok)=>{
            this.arr=ok.data.hotflower.flower    
            console.log(ok)

        })
    },
  methods:{
  fun(){
    this.$router.push("/flowerinfo");
  }
}
}
</script>

<style scoped>
.hotTitle{
    height: 1.28rem;
}
.hotTitle img{
    height: 0.9rem;
    width: 100%;
}
.list{
display: flex;
justify-content: space-between;
padding:0rem 0.04rem ;
box-sizing: border-box;
flex-wrap: wrap;
font-size: 0.16rem;
}
.list li{
    width: 1.82rem;
    height: 2.78rem;
    flex-shrink: 0;
    text-align: center;
}
.list li img{
    width: 1.82rem;
    height: 1.82rem;
}
.title{
    color:#3d3d3d;
    font-weight: 500;
    font-size: 0.15rem;
}
.title1{
    color: #6d6d6d;
      font-size: 0.15rem;

}
.price{
   color:#dd542a ;
   font-size: 0.14rem;
}
.ori{
    text-decoration: line-through;
    color: #b8b8b8;
}
</style>